This document covers the installation and use of this theme and reveals answers to common problems and issues - I encourage you to read this document throughly if you are experiencing any difficulties.
To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress
Firstly, unzip the Sommerce_Premium_WordPress_Theme.zip file to a directory on your computer. It contains a folder named Sommerce.zip file. Open this archive and upload the Sommerce folder to your server via ftp to the /themes/ directory on your Wordpress installation. (wp-content > themes)
Go to your Wordpress admin, and in the Appearance-panel, choose Add New Themes. Click Add new. Upload the sommerce.zip.
Not upload the zip file you downloaded from themeforest, but only the sommerce.zip file, if you have a "missing stylesheet" issue you are uploading the wrong file!
Installing WordPress http://codex.wordpress.org/Installing_WordPress
Once you have uploaded the theme, activate your theme in Appearance > Themes.
Using Themes http://codex.wordpress.org/Using_Themes
You can install sample content by importing our live preview settings, that you can find in our support forum.
You can also import all images we used for our live preview (except the images taken by Fotolia with a regular license, we can't redistribuite them)
To start with Sommerce Theme you have to:
For the home page to display correctly, it is important that Wordpress is set up to display a static page as home page. You set this in Settings > Reading. Chose 'static page' and select the page you created for the home in the select menu.
The theme has a lot of slideshow-variants to choose from.
Now, in the "Slides" tab you can:
Size of the Elegant Slider images: Width 960px, height 338px
Now, in the "Slides" tab you can:
Size suggested for the Cycle Slider images: Width 500px, height 325px
Note: For each slider, in the Slider Settings tab you can set the animation speed, and for some sliders also the type of animation (fade, scrollLeft, scrollUp and so on). You can also set if you want a "read more" button in the slides and enter the text for this button.
Now, in the "Slides" tab you can:
Size of the Nivo Slider images: Width 960px, height 350px
Now, in the "Slides" tab you can:
Size of the Flash slider images: Width 960px, height 314px
Now, in the "Slides" tab you can:
NOTE: You have to use a number of images multiples of the panels: if you want to use 4 panels, you have to use 4, 8, 12, 16 images and so son. If you want to have 3 panels, you have to upload 6,9,12,15 images and so on.
Size of the Rotating slider images: Width 310px, height 465px
Now, in the "Slides" tab you can:
In this slideshow you can also add an extratooltip above your image.
Where you can find this coords?
Open the big image with Photoshop (or another software) and with a rule take the coords (in pixel) where you want to put the tooltip:
In the editor of your home page, you can add a content that will display in your home page.
You can also enter some shortcodes in the editor, to display the columns, icon boxes or other elements.
Add the icon sections in the page (like the Home Page 4 of our demo)
In the editor, open the "HTML" tab (no visual). Under the editor, tick the 'Remove wpautop filter' option.
Now, in the editor enter the shortcode to display the icon boxes (you can view the complete list of availables shortcodes in the shortcodes tab or in the live preview.)
[section icon="phone-black" title="Logo Design" before_title="<h4>" after_title="</h4>"] Now that our web site is launched I would like to formally record my appreciation for the excellent service that Kassyopea provided and for your.[/section] [section icon="chart-bar" title="Advertising" before_title="<h4>" after_title="</h4>" ] Now that our web site is launched I would like to formally record my appreciation for the excellent service that Kassyopea provided and for your.[/section] [section icon="checkbox-checked" title="Web Development" before_title="<h4>" after_title="</h4>" ] Now that our web site is launched I would like to formally record my appreciation for the excellent service that Kassyopea provided and for your.[/section] [section icon="contact" title="Logo Design" before_title="<h4>" after_title="</h4>" last="1"] Now that our web site is launched I would like to formally record my appreciation for the excellent service that Kassyopea provided and for your.[/section]
Note: The last icon section need to have the last="1" attribute!
Add the columns shortcode in the page (like this page of our demo)
In the editor, open the "HTML" tab (no visual). Under the editor, tick the 'Remove wpautop filter' option.
Now, in the editor enter the shortcode to display the columns (you can view the complete list of availables shortcodes in the shortcodes tab or in the live preview.)
[one_fourth] <h2>Clean and minimal</h2> As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun! [/one_fourth] [one_fourth] <h2>Another title</h2> As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun! [/one_fourth] [one_fourth] <h2>Love this theme?</h2> As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun! [/one_fourth] [one_fourth_last] <h2>Buy it on ThemeForest</h2> As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun! [/one_fourth_last]
Note: The last icon section need to have the _last attribute!
Now you have only to put also the images in your editor!
You can set how many rows use for your footer and set the style for the footer layout.
In the textareas of the copyright text Left, center or right you can put your logo, like our demo. If you use a textual logo, you can use the shortcode:
[logo]Sommerce[/logo]
This is the result:
You can also upload your logo image. You have to upload your logo in Media and take the url of the image. Then, use this shortcode:
[img src="http://yourinspirationweb.com/demo/sommerce/files/2011/09/logo1.png"]
If you want to use the credit card icons, use this shortcode:
[credit cards="paypal,visa,mastercard,amex,cirrus,bank-check,discover"]
You do not need to enter any content on this page. This will be your blog index page, and will list your blog posts in chronological order.
You can customize the layout and appearance of the blog page in Appearance > Theme options > General > Blog settings:
NOTE: In Appearance > Widget you can find the preset sidebar for the blog page. Drag and drop the widgets in the Blog sidebar to customize the sidebar of your blog.
[testimonials] to display all testimonials;
FAQ-posts are custom post types.
[faq] to display the faqs
The shortcode for the customer support is added by shortcode. Under the content of the page, you can add the shortcode in the extra content section under the editor in the page:
The code for this shortcode is:
[call title="Not found the answer?" incipit="feel free to contact our customer service for support"
phone="800.034.881"]
In this theme you can create unlimited contact form.You can create a default contact form, like the form in our live preview, or a custom form.
Create a custom contact form
%field% in the body of the e-mail (Contact Form Configuration). For example, if you add a field phone, in the body you have to add %phone%.Create a default contact form
NOTE: If you'd like to use left floated input fields you could add the class [code]full[/code] to each field: click to "Edit" and add [code]Full[/code] in the Class form, as shown in the pictures below.
This is a list of some shortcodes of this theme. Insert this code in your page. To view all shortcodes availables, take a look to this page.
Border (use it to separate the content with a border)
[border]
Space (use it to add some space between the elements)
[space]
Clear (use it after columns and icon boxes)
[clear]
Call to action "Not found the answer" (FAQ page)
[call title="Not found the answer?" incipit="feel free to contact our customer service for support" phone="800.034.881"]
Call to action "Sign in now" (FAQ page)
[call_two label_button="SIGN IN NOW" href="#"][size px="52"]35% [/size][size px="48"]off everything [/size] Sign in to our list before march 21 to enjoy our special sales![/call_two]
Dropcap
[dropcap]your text[/dropcap]
Quote text
[quote]your text[/quote]
Highlight text
[highlight]your text[/highlight]
Set the size of the text (maybe you want some text more bigger?)
[size px="32"]this text is 32px [/size]
Write a text with the font used for titles and slogans
This is my [special_font size="18" unit="px"]slogan![/special_font]
Write a text with the font used for the logo
[logo]Sommerce[/logo]
Styled lists
[list type="star"] <li>item</li> <li>item</li> <li>item</li> [/list]
Symbols: Star / arrow / check / add / info
Success box
[success]your text[/success]
Arrow box
[arrow]your text[/arrow]
Alert box
[alert]your text[/alert]
Error box
[error]your text[/error]
Notice box
[notice]your text[/notice]
Info box
[info]your text[/info]
Custom buttons
[button_icon icon="arrow|arrow-left|calc|gift|offer|remove"]your text[/button_icon]
Custom buttons with left icons
[button_icon icon="arrow|arrow-left|calc|gift|offer|remove" sense="rtl"]your text[/button_icon]
Big colorful buttons
[button color="green|blue|magenta|red|orange|yellow" width="large" href="#"]your text[/button]
Small colorful buttons
[button color="green|blue|magenta|red|orange|yellow" width="small" href="#"]your text[/button]
A minimal white button
[read_more href="link"]Read more[/read_more]
Icon boxes
[section icon="bag" title="your title"] your text [/section]
Icons: Tick / bag / pictures / letter / box / bubble / bulb / calendar / cart / chart / clipboard / coffee / diagram / doodles / gear / info / globe / gift / label / moleskine / monitor / mphone / news / open / pc / pencil / phone / postit / qmark / refresh / shopbag / statistics / testimonial
Icon boxes (black style)
[section icon="card-black" title="Logo Design" before_title="<h6>" after_title="</h6>"] Now that our web site is launched I would like to formally record my appreciation for the excellent service that Kassyopea provided and for your.[/section]
Icons: card-black / brush-black / monitor-black / chart-bar / box / case / chart-line / bookmark / checkbox-checked / phone-black / contact / info /
Tabs
[tabs tab1="Price" tab2="Services" tab3="Testimonial"]
[tab id="Price"]This is tab1[/tab]
[tab id="Services"]This is tab2[/tab]
[tab id="Testimonial"]This is tab3[/tab]
[/tabs]
Toggle
[toggle title="This is title"]Your Content...[/toggle]
Price box
[price title="Standard Plan" price="45.0 $" href="#" buttontext="More info" color="white"] <li>Morbi est elit, imperdiet sit amet</li> <li>Lorem ipsum seget, egestas in leo.</li> <li>Morbi est elit, imperdiet sit amet</li> <li>Lorem ipsum seget, egestas in leo.</li> [/price]
Table
[table color="white"] <table style="width: 100%;" cellspacing="0" cellpadding="0"> <thead> <tr> <th style="width:20%"></th> <th style="width:20%">Free</th> <th style="width:20%">Mini</th> <th style="width:20%">Standard</th> <th style="width:20%">Premium</th> </tr> </thead> <tbody> <tr> <th class="features">Features 1</th> <td>1</td> <td>unlimited</td> <td>[x]</td> <td>-</td> </tr> </tbody> </table> [/table]
Youtube video
[youtube width="640" height="385" video_id="wSBIcNmCAX0"]
Vimeo video
[vimeo width="640" height="360" video_id="3109777"]
Dailymotion video
[dailymotion width="640" height="360" video_id="xgis0k"]
Dailymotion video
[dailymotion width="640" height="360" video_id="xgis0k"]
Nivo slideshow
[slider effect="random" width="640" height="380"]
wp-content/themes/bolder/images/nivo-slider/001.jpg
wp-content/themes/bolder/images/nivo-slider/002.jpg
wp-content/themes/bolder/images/nivo-slider/003.jpg
wp-content/themes/bolder/images/nivo-slider/004.jpg
wp-content/themes/bolder/images/nivo-slider/005.jpg
[/slider]
Effects: sliceDown / sliceDownLeft / sliceUp / sliceUpLeft / sliceUpDown / sliceUpDownLeft / fold / fade / random / slideInRight / slideInLeft / boxRandom / boxRain / boxRainReverse / boxRainGrow / boxRainGrowReverse
Recent posts
[recentpost items="3"]
Popular posts
[popularpost items="3"]
Social icons
[social type="facebook|rss|twitter|youtube|yahoo|vimeo|flickr|blogger" href="" title=""]
Newsletter form
[newsletter_form action="" label="your email address" ]
This theme has several meta panels for post/page editing. Here I will go through some of them
Here you define the level of the page (if is a sub page or a primary page) and the template of the page.
Choose between:
Here you can chose if display or not the title of the page and other settings:
This is where you enter the slogan for the page. You can also add a subtitle under the slogan, it will be more smaller.
In the page, open the Screen Options tab on the top right and tick 'Discussion':
Then, under the editor, remove the tick from "allow comments" and save the page!
In this theme you find 2 preset sidebar:
The shop sidebar is more smaller then the normal sidebar used for the blog pages or other pages. We made the sidebar with a width of 170 px so you can put more products in your page.
So, if you want to display your products in the home page (or in another page) and you want also a sidebar, for a better result you have to use the Shop sidebar in this page.
8 custom widgets are provided with the theme. These are:
This theme has several meta panels for post/page editing. Here I will go through some of them
Here you define the level of the page (if is a sub page or a primary page) and the template of the page.
Choose between:
Here you can chose if display or not the title of the page and other settings:
This is where you enter the slogan for the page. You can also add a subtitle under the slogan, it will be more smaller.
This theme is based on the JigoShop plugin. You can search it in your plugin area, install and active it.
In our support forum there are a complete videoscreencast that can help you to set your store: how to create product's categories, how to add products and change the style of your product page (and the style of the products thumbnails) and so on.
You can choose to display only the featured products in your home page, or the recent products, or display some product and choose you how many and the type of order.
To display the features products you have to use this shortcode:
[yiw_featured_products title="Featured Products" description="our selection of specials items" per_page="4" columns="4"]
You can add the title and the description (like our demo), set how many items to show and how many columns (without sidebar you can display 5 columns, with the shop sidebar you can set 4 columns
To display the recent products you have to use this shortcode:
[yiw_latest_products title="Latest Products" description="if you enjoy it, visite our market" per_page="4" columns="4"]
You can add the title and the description (like our demo), set how many items to show and how many columns (without sidebar you can display 5 columns, with the shop sidebar you can set 4 columns
To display all products you have to use this shortcode:
[items per_page="12" columns="4" orderby="date" order="desc"]
or:
[items ids="1, 2, 3, 4, 5"]
to show multiple products by ID.
To display the best sellers products:
[best_sellers per_page="" columns=""]
To display the best sellers products with the "sommerce" style (title and description on the left):
[boxed_best_sellers title="" description="" per_page="" columns=""]
This theme is ready for localization via .po/.mo files, and works with the WPML plugin.
If you are not familiar with translating Wordpress themes, I recommend reading this article: http://codex.wordpress.org/Translating_WordPress
This theme uses wp-nav-menu for building menus. You find this in Appearance > Menus.
For more info on how to setup your menu in wp 3.0, see http://codex.wordpress.org/Appearance_Menus_SubPanel
When you added all pages to your menu, you can drag/drop and order pages.
Before you have to add the pages to your menu. After this, if you want to assign the megamenu style to the page, you have to use the CSS CLASSES
megamenu. (To have it open the Screen Options tab on the top right and tick Css Classes):
To set the number of columns you want to create in your megamenu, you have to add columns-N (N is the number of columns) after the megamenu class.
By default the megamenu have 3 columns. You can use min 1 column and max 5 columns.
megamenu columns-5
In our forum you can find a video that can help you to set the megamenu exactly our demo.
Create a new menu and in the Theme Location select chose if for the Links Bar menu:

Now here you can add your links. To have an mail icon like our 'contact us' links on the top, you have to add the icon mail CSS CLASSES to the link:
